<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="tableForm" :inline="true" :model="listQuery">
        <el-row>
          <el-col :span="4">
            <el-form-item label="商品名称" prop="itemName">
              <el-input v-model="listQuery.itemName" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="商品ID" prop="itemId">
              <el-input v-model="listQuery.itemId" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="投放任务" prop="taskID">
              <el-select
                v-model="listQuery.taskID"
                placeholder="请选择"
                @change="changeTask"
              >
                <el-option
                  v-for="(item, index) in taskList"
                  :key="index"
                  :label="item.taskName"
                  :value="item.taskID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="任务分类列表" prop="poolId">
              <el-select
                v-model="listQuery.poolId"
                placeholder="请选择"
                :disabled="!listQuery.taskID"
                @change="$forceUpdate()"
              >
                <el-option
                  v-for="(item, index) in advList"
                  :key="index"
                  :label="item.poolName"
                  :value="item.poolId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="状态" prop="status">
              <el-select v-model="listQuery.status" placeholder="请选择">
                <el-option label="有效" :value="1" />
                <el-option label="无效" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="大航海状态" prop="isOnline">
              <el-select v-model="listQuery.isOnline" placeholder="请选择">
                <el-option label="上线" value="true" />
                <el-option label="下线" value="false" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-button @click="resetForm('tableForm')">重置</el-button>
            <el-button
              v-waves
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >
              {{ $t("table.search") }}
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-button type="danger" class="marginBm" @click="editAll(1)"
      >批量删除</el-button
    >
    <el-button type="warning" class="marginBm" @click="editAll(2)"
      >批量下架</el-button
    >
    <el-button type="primary" class="marginBm" @click="proUpdateDiagle = true"
      >手动更新</el-button
    >
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column
        label="商品信息"
        prop="nickname"
        align="center"
        width="500"
      >
        <template slot-scope="{ row }">
          <div class="goodsInfo">
            <el-avatar
              :src="row.mainImg"
              :size="50"
              fit="contain"
              shape="square"
            />
            <div class="textBox">
              <el-tooltip effect="dark" placement="top" :content="row.itemName">
                <div class="content">商品标题：{{ row.itemName }}</div>
              </el-tooltip>

              <div class="content">商品ID：{{ row.itemId }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" prop="originalPrice" align="center">
        <template slot-scope="{ row }">
          <div class="content">{{ row.originalPrice }}</div>
        </template>
      </el-table-column>
      <el-table-column label="折扣价格" prop="currentPrice" align="center">
        <template slot-scope="{ row }">
          <div class="content">{{ row.currentPrice }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="投放"
        prop="task.taskName"
        align="center"
        width="150"
      />
      <el-table-column
        label="分类"
        prop="pool.poolName"
        align="center"
        width="200"
      />
      <el-table-column label="佣金类型" prop="commissionType" align="center">
        <template slot-scope="{ row }">
          <div class="content">{{ judgeCommissType(row.commissionType) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="佣金率" prop="commissionRate" align="center">
        <template slot-scope="{ row }">
          <div class="content">{{ judgeCommission(row.commissionRate) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="月销量" prop="fuzzySales" align="center" />
      <el-table-column label="线上状态" prop="isOnline" align="center">
        <template slot-scope="{ row }">
          {{ row.isOnline | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column label="商品状态" prop="account_balance" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="2"
            @change="handleStatuChange(1, row.id, row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.actions')"
        align="center"
        width="170"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleStatuChange(2, row.id, null)"
          >
            删除
          </el-button>
          <!-- <el-button type="danger" size="mini" @click="handleDelete(row)">
            投放
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="投放"
      center
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <div class="tf-top">
        <el-avatar shape="square" :size="100" :src="urlMask.mainImg" />
        <div class="tf-top-right">
          <div class="name">
            {{ urlMask.itemName }}
          </div>
          <div class="bottom">
            <p>销量：{{ urlMask.mSales }}</p>
            <p>原价：{{ urlMask.originalPrice }}</p>
            <p>现价：{{ urlMask.currentPrice }}</p>
          </div>
        </div>
      </div>
      <el-table
        v-loading="urlLoading"
        :data="urlTable"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="adId"
          label="广告位ID"
          width="100"
          align="center"
        />
        <el-table-column prop="adName" label="广告位名称" align="center" />
        <el-table-column
          prop="imgUrl"
          label="图片URL"
          align="center"
          width="100"
        >
          <template slot-scope="{ row }"
            ><el-link type="primary" @click="copyCode(row.imgUrl)"
              >复制
            </el-link></template
          >
        </el-table-column>
        <el-table-column
          prop="h5Url"
          label="H5承接页"
          align="center"
          width="100"
        >
          <template slot-scope="{ row }"
            ><el-link type="primary" @click="copyCode(row.h5Url)"
              >复制
            </el-link></template
          >
        </el-table-column>
        <el-table-column
          prop="deepLinkUrl"
          label="DeepLink(安卓)"
          width="140"
          align="center"
        >
          <template slot-scope="{ row }"
            ><el-link type="primary" @click="copyCode(row.deepLinkUrl)"
              >复制
            </el-link></template
          >
        </el-table-column>
        <el-table-column
          prop="iosUrl"
          label="universal link(IOS)"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }"
            ><el-link type="primary" @click="copyCode(row.iosUrl)"
              >复制
            </el-link></template
          >
        </el-table-column>
        <el-table-column
          prop="taobao_password"
          label="淘口令"
          align="center"
          width="140"
        >
          <template slot-scope="{ row }"
            ><el-button type="primary" @click="copyCode(row.taobao_password)"
              >复制淘口令</el-button
            ></template
          >
        </el-table-column>
      </el-table>
      <pagination
        v-show="urlTotal > 0"
        :total="urlTotal"
        :page.sync="urlQuery.page"
        :limit.sync="urlQuery.limit"
        @pagination="getListURL"
      />
    </el-dialog>

    <el-dialog
      :title="textMap[dialogStatus]"
      center
      :visible.sync="editFormVisible"
      :close-on-click-modal="false"
    >
      <el-form ref="dataForm" :model="temp" label-width="110px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="主图">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/upload'"
                :show-file-list="false"
                :headers="headers"
                name="image"
                :on-success="handleTopSuccess"
              >
                <img v-if="temp.mainImg" :src="temp.mainImg" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品标题" prop="itemName">
              <el-input v-model="temp.itemName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="短标题" prop="goods_description">
              <el-input v-model="temp.goods_description" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="推广文案" prop="goods_content">
              <el-input
                v-model="temp.goods_content"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="baseLine" />
        <el-row>
          <el-col :span="8">
            <el-form-item label="原价" prop="originalPrice">
              <el-input v-model="temp.originalPrice" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优惠券" prop="goods_coupon">
              <el-input
                v-model="temp.goods_coupon"
                @blur="handleCouponChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="券后价" prop="post_coupon_price">
              <el-input
                v-model="temp.post_coupon_price"
                @blur="handlePriceChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="佣金比例" prop="commissionRate">
              <el-input v-model="temp.commissionRate" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存" prop="product_stock">
              <el-input v-model="temp.quantity" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类">
              <el-select v-model="temp.poolId" class="filter-item">
                <el-option
                  v-for="(item, index) in tempRwList"
                  :key="index"
                  :label="item.poolName"
                  :value="item.poolId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="补贴" prop="subsidy_amount">
              <el-input v-model="temp.subsidy_amount" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="直推补贴金额" prop="push_subsidy_amount">
              <el-input v-model="temp.push_subsidy_amount" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="baseLine" />
        <el-row>
          <el-col :span="12">
            <el-form-item label="列表排序" prop="order_num">
              <el-input-number
                v-model="temp.order_num"
                :min="1"
                :max="99"
                :controls="false"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动开始时间" prop="start_time">
              <el-date-picker
                v-model="temp.created_at"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间" prop="end_time">
              <el-date-picker
                v-model="temp.updated_at"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="用户展示" prop="user_show">
              <el-radio-group v-model="temp.user_show">
                <el-radio :label="1">所有人</el-radio>
                <el-radio :label="2">指定用户</el-radio>
              </el-radio-group>
              <el-select
                v-show="temp.user_show != 1"
                v-model="temp.user_rids"
                style="margin-left: 20px"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="searchComment"
              >
                <el-option
                  v-for="item in commentList"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.rid"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="updateData()">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="手动更新"
      center
      :visible.sync="proUpdateDiagle"
      :close-on-click-modal="false"
      style="height: 800px"
    >
      <div class="pool-content">
        <el-tree
          ref="taskTree"
          node-key="id"
          :data="allTask"
          :props="taskProps"
          show-checkbox
          :default-expanded-keys="[32768]"
          accordion
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="proUpdateDiagle = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="choiceUpdate()">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  geturlList,
  getDhhList,
  fetchLevelList,
  productEdit,
  fetchCateList,
  productMarket,
  productUpdate,
  commentUserList,
  getMaskListFacth,
  getPoolListFacth,
  changeGoods,
  updateDhh,
  getPoolGoodsListFacth,
  getAllPoos,
  updatePools,
} from "@/api/index";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";

export default {
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        true: "上线",
        false: "下线",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      allTask: [],
      taskProps: {
        label: "name",
        children: "pool_list",
      },
      proUpdateDiagle: false,
      tempRwList: [],
      editFormVisible: false,
      advList: [],
      taskList: [],
      urlId: "",
      urlQuery: {
        page: 1,
        limit: 10,
      },
      urlLoading: false,
      urlMask: [],
      urlTable: [],
      selectionList: [],
      commentList: [],
      rules: {
        start_time: [
          {
            type: "string",
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        end_time: [
          {
            type: "string",
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      headers: {
        "access-token": getToken(),
      },
      activeName: "1",
      orderName: "share",
      tableKey: 0,
      levelUserList: null,
      list: null,
      orderList: null,
      total: 0,
      urlTotal: 0,
      userTotal: 0,
      orderTotal: 0,
      listLoading: false,
      userListQuery: {
        page: 1,
        limit: 10,
      },
      listQuery: {
        page: 1,
        limit: 20,
      },
      orderListQuery: {
        page: 1,
        limit: 10,
      },
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" },
      ],
      statusOptions: [],
      showReviewer: false,
      temp: {
        product_id: null,
        product_link: "",
        product_title: "",
        product_short_title: null,
        product_description: "",
        product_content: "",
        product_category: "",
        product_image: "",
        product_price: "",
        product_coupon: null,
        post_coupon_price: null,
        product_stock: null,
        subsidy_amount: "",
        push_subsidy_amount: "",
        publish_time: "",
        start_time: null,
        end_time: null,
        order_num: null,
        is_recommend: 2,
        is_hot: 2,
        status: 1,
        deleted_at: null,
        anchor_id: null,
        commission_rate: "",
        commission_type: null,
        is_living: 0,
        live_start_time: null,
        live_id: 0,
        promotion_id: null,
        second_category: "",
        partner_ratio: "",
        platform_fee: "0",
        created_at: "",
        updated_at: "",
        user_show: 1,
        user_rids: "",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑商品",
        create: "添加商品",
      },
      dialogPvVisible: false,
      pvData: [],
      downloadLoading: false,
    };
  },
  created() {
    this.getList();
    this.getCateList();
    this.getcommentUserList();
    this.getTaskList();
  },
  methods: {
    choiceUpdate() {
      const selectedIds = this.$refs.taskTree.getCheckedKeys();
      const data = selectedIds.toString();
      updatePools({
        poolIds: data,
      }).then((res) => {
        this.$refs.taskTree.setCheckedKeys([]);
        this.$message.success("操作成功");
        this.proUpdateDiagle = false;
      });
    },
    handleEdit(row) {
      this.editFormVisible = true;
      this.temp = JSON.parse(JSON.stringify(row));
      if (this.temp.user_rids != "" && this.temp.user_rids) {
        this.temp.user_rids = row.user_rids.split(",");
        this.temp.user_rids = this.temp.user_rids.map(Number);
      }
      this.changeTempTask(this.temp.itemId);
    },
    changeTempTask(value) {
      getPoolGoodsListFacth({
        itemID: value,
      }).then((res) => {
        this.tempRwList = res.data.list;
      });
    },
    changeTask(value) {
      this.listQuery.poolId = "";
      this.getAdvList(value);
    },
    getAdvList(id) {
      getPoolListFacth({
        taskID: id,
      }).then((res) => {
        this.advList = res.data.list;
      });
    },
    getTaskList() {
      getMaskListFacth().then((res) => {
        this.taskList = res.data.list;
      });
      getAllPoos().then((res) => {
        this.allTask = res.data;
      });
    },
    copyCode(data) {
      const url = data;
      const oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
      oInput.remove();
    },
    judgeCommissType(type) {
      switch (type) {
        case 0:
          return "通用";
          break;
        case 1:
          return "定向";
          break;
        case 2:
          return "高佣";
          break;
        case 3:
          return "营销计划";
          break;
        default:
          return "未知类型";
          break;
      }
    },
    judgeCommission(value) {
      if (value == null) {
        return "--";
      } else {
        return value + "%";
      }
    },
    editAll(type) {
      let item = this.selectionList;
      item = item.toString();
      let temp = {};
      if (type == 1) {
        temp = {
          ids: item,
          type: 2,
        };
      } else {
        temp = {
          ids: item,
          type: 1,
        };
      }
      changeGoods(temp).then(() => {
        this.$message.success("操作成功");
        this.getList();
      });
    },
    selectionChange(value) {
      this.selectionList = value.map((item) => {
        return item.id;
      });
    },
    searchComment(data) {
      commentUserList({
        search_key: data,
      }).then((res) => {
        this.commentList = res.data;
      });
    },
    getcommentUserList() {
      commentUserList().then((res) => {
        this.commentList = res.data;
      });
    },
    handleCouponChange() {
      if (this.temp.originalPrice && this.temp.goods_coupon) {
        this.temp = Object.assign({}, this.temp, {
          post_coupon_price: (
            this.temp.originalPrice - this.temp.goods_coupon
          ).toFixed(2),
        });
      }
    },
    handlePriceChange() {
      if (this.temp.originalPrice && this.temp.post_coupon_price) {
        this.temp = Object.assign({}, this.temp, {
          goods_coupon: (
            this.temp.originalPrice - this.temp.post_coupon_price
          ).toFixed(2),
        });
      }
    },
    handleStatuChange(val, id, status) {
      const ids = id.toString();
      changeGoods({
        type: val,
        ids: ids,
        status: status,
      }).then((res) => {
        this.getList();
      });
    },
    handleHotChange(val, id) {
      productUpdate({ id, type: 2, is_hot: val }).then(() => {
        this.getList();
      });
    },
    handleRecommendChange(val, id) {
      productUpdate({ id, type: 2, is_recommend: val }).then(() => {
        this.getList();
      });
    },
    handleDetail(object_ids) {
      productMarket({ object_ids }).then((response) => {
        this.$nextTick(() => {
          this.temp = Object.assign({}, this.temp, response.data[0]);
        });
      });
    },
    handleAdd() {
      this.dialogStatus = "create";
      this.temp = {
        product_id: null,
        product_link: "",
        product_title: "",
        product_short_title: null,
        product_description: "",
        product_content: "",
        product_category: "",
        product_image: "",
        product_price: "",
        product_coupon: null,
        post_coupon_price: null,
        product_stock: null,
        subsidy_amount: "",
        push_subsidy_amount: "",
        publish_time: "",
        start_time: null,
        end_time: null,
        order_num: null,
        is_recommend: 2,
        is_hot: 2,
        status: 1,
        deleted_at: null,
        anchor_id: null,
        commission_rate: "",
        commission_type: null,
        is_living: 0,
        live_start_time: null,
        live_id: 0,
        promotion_id: null,
        second_category: "",
        partner_ratio: "",
        platform_fee: "0",
        created_at: "",
        updated_at: "",
        user_show: 1,
        user_rids: [],
      };
      this.dialogFormVisible = true;
    },
    handleTopSuccess(res, file) {
      if (res.code === 200) {
        this.temp = Object.assign({}, this.temp, {
          product_image: res.data.image,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getList() {
      const params = JSON.parse(JSON.stringify(this.listQuery));
      this.listLoading = true;
      getDhhList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    getCateList() {
      fetchCateList({ type: 1 }).then((response) => {
        this.statusOptions = response.data.list;
      });
    },
    getUserList() {
      fetchLevelList({
        ...this.userListQuery,
        id: this.temp.id,
      }).then((response) => {
        this.levelUserList = response.data.users;
        this.userTotal = response.data.total;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    handleUpdate(row) {
      commentUserList().then((res) => {
        this.commentList = res.data;
        this.temp = JSON.parse(JSON.stringify(row));

        if (this.temp.user_rids != "") {
          this.temp.user_rids = row.user_rids.split(",");
          this.temp.user_rids = this.temp.user_rids.map(Number);
        }
        this.dialogFormVisible = true;
      });
    },
    handleDelete(row) {
      this.dialogFormVisible = true;
      this.urlLoading = true;
      this.urlMask = row;
      this.urlId = row.itemId;
      this.getListURL();
    },
    getListURL() {
      geturlList({
        itemId: this.urlId,
        page: this.urlQuery.page,
        limit: this.urlQuery.limit,
        // adId: row.adId,
      }).then((res) => {
        this.urlLoading = false;
        this.urlTable = res.data.list;
        this.urlTotal = res.data.total;
      });
    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const tempList = JSON.parse(JSON.stringify(this.temp));
          if (tempList.user_rid) {
            tempList.user_rids = tempList.user_rids.toString();
          }

          updateDhh(tempList).then(() => {
            this.$message({ message: "操作成功", type: "success" });
            this.editFormVisible = false;
            this.getList();
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
  .tf-top-right {
    flex: 1;
    overflow: hidden;
    .name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .bottom {
      display: flex;
      gap: 40px;
      p {
        margin: 0;
      }
    }
  }
}
.flexBox {
  display: flex;
  .btn {
    margin-left: 20px;
  }
}
.baseLine {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 22px;
}
.filter-container {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.marginBm {
  margin-bottom: 20px;
}
.dataBox {
  padding: 20px 0;
  border-top: 1px solid #333;
  display: flex;
  .item {
    flex: 1;
  }
}
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.goodsInfo {
  display: flex;
  align-items: center;
  .textBox {
    text-align: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.pool-content {
  height: 500px; /* 设置内容区域的最大高度 */
  overflow-y: auto; /* 当内容超出时出现滚动条 */
}
</style>
